<template>
    <div class="listBox">
        <div class="el-card__body">
            <span>退货商品</span>
        </div>
        <el-table :data="list" border style="width: 100%" cell-class-name="align-c">
            <el-table-column label="商品图片" width="180">
                <template #default="{ row }">
                    <img style="width:80px" :src="row.productPic" alt="">
                </template>
            </el-table-column>
            <el-table-column label="商品名称" width="317">
                <template #default="{ row }">
                    <p>{{ row.productName }}</p>
                    <p>品牌：{{ row.productBrand }}</p>
                </template>
            </el-table-column>
            <el-table-column label="价格/货号" width="180">
                <template #default="{ row }">
                    <p>价格：{{ filters(row.productRealPrice) }}</p>
                    <p>货号：{{ 'NO.'+row.productId }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="productAttr" label="属性" width="180" />
            <el-table-column prop="productCount" label="数量" width="100" />
            <el-table-column label="小计">
                <template #default="{ row }" width="100">
                    <p>{{ filters(row.productRealPrice) }}</p>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="listBox">
        <div class="el-card__body">
            <span>服务单信息</span>
        </div>
        <div class="form">
            <div class="el-row">
                <div class="form-border">服务单号</div>
                <div class="form-right">{{ form.id }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">申请状态</div>
                <div class="form-right">{{
                    form.status == 0 ? '待处理' : (form.status == 1 ? '退货中' : (form.status == 2 ? '已完成' : (form.status == 3
                        ?
                        '已拒绝' : '')))
                }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">订单编号</div>
                <div class="form-right">
                    {{ form.orderSn }}
                    <span style="color: #409eff;font-size: 12px;cursor:pointer"
                        @click="router.push(`/oms/orderDetail?id=${form.orderId}`)">查看</span>
                </div>
            </div>
            <div class="el-row">
                <div class="form-border">申请时间</div>
                <div class="form-right">{{ formateDate(form.createTime) }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">用户账号</div>
                <div class="form-right">{{ form.memberUsername }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">联系人</div>
                <div class="form-right">{{ form.returnName }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">联系电话</div>
                <div class="form-right">{{ form.returnPhone }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">退货原因</div>
                <div class="form-right">{{ form.reason }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">问题描述</div>
                <div class="form-right">{{ form.description }}</div>
            </div>
            <div class="el-row">
                <div class="form-border" style="height:100px;line-height: 100px;">凭证图片</div>
                <div class="form-right">
                    <img :src="form.proofPics" alt="">
                </div>
            </div>
        </div>
        <div class="form">
            <div class="el-row">
                <div class="form-border">订单金额</div>
                <div class="form-right">{{ filters(form.productRealPrice) }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">确认退款金额</div>
                <div class="form-right" style="display: flex;align-items: center;">
                    <span style="margin-right: 10px;">￥</span>
                    <el-input :disabled="form.status === 0 ? false : true" type="text"
                        :value="form.returnAmount == null ? '0' : form.returnAmount" v-model="inputVal" />
                </div>
            </div>
            <div class="el-row">
                <div class="form-border">选择收货点</div>
                <div class="form-right">
                    <el-select :disabled="form.status === 0 ? false : true" v-model="value" class="m-2"
                        :placeholder="form.status == 0 ? '深圳发货点' : form.companyAddress.addressName">
                        <el-option v-for="item in Receiving" :key="item.id" :label="item.addressName"
                            :value="item.addressName" />
                    </el-select>
                </div>
            </div>
            <div class="el-row">
                <div class="form-border">收货人姓名</div>
                <div class="form-right">{{ form.returnName }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">所在区域</div>
                <div class="form-right">{{
                    form.status == 0 ? Receiving[0].province + ' ' + Receiving[0].city + ' ' + Receiving[0].region
                        : form.companyAddress.province + ' ' + form.companyAddress.region
                }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">详细地址</div>
                <div class="form-right">{{
                    form.status == 0 ? Receiving[0].detailAddress :
                        form.companyAddress.detailAddress
                }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">联系电话</div>
                <div class="form-right">{{ form.returnPhone }}</div>
            </div>
        </div>
        <div class="form">
            <div class="el-row" v-if="form.status == 0 ? false : true">
                <div class="form-border">处理人员</div>
                <div class="form-right">{{ form.handleMan }}</div>
            </div>
            <div class="el-row" v-if="form.status == 0 ? false : true">
                <div class="form-border">处理时间</div>
                <div class="form-right">{{ formateDate(form.handleTime) }}</div>
            </div>
            <div class="el-row">
                <div class="form-border">处理备注</div>
                <div class="form-right">{{ form.handleNote }}
                    <el-input v-if="form.status == 0 ? true : false" v-model="returnAmountVal"></el-input>
                </div>
            </div>
        </div>
        <div class="form">
            <div class="el-row" v-if="form.status == 2 ? true : false">
                <div class="form-border">收货人员</div>
                <div class="form-right">{{ form.receiveMan }}</div>
            </div>
            <div class="el-row" v-if="form.status == 2 ? true : false">
                <div class="form-border">收货人员</div>
                <div class="form-right">{{ formateDate(form.receiveTime) }}</div>
            </div>
            <div class="el-row" v-if="form.status == 2 || form.status == 1 ? true : false">
                <div class="form-border">收货备注</div>
                <div class="form-right">{{ form.receiveNote }}
                    <el-input v-if="form.status == 1 ? true : false"></el-input>
                </div>
            </div>
        </div>
        <el-button v-if="form.status == 1 ? true : false" @click="ConfirmReceipt">确认收货</el-button>
        <el-button v-if="form.status == 0 ? true : false" @click="ConfirmReturn">确认退货</el-button>
        <el-button v-if="form.status == 0 ? true : false" @click="ConfirmRefuse">拒绝退货</el-button>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getReturnApplyIdApi, getCompanyAddressApi, getUpdateStatusIdApi } from './api';
import { formateDate } from "@/utils/index";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '@/store/user'

const route = useRoute()
const router = useRouter()
const list = ref<ReturnApplyType[]>([])
const form = ref<ReturnApplyType>({} as any)
const Receiving = ref<companyAddress[]>([])
const value = ref('')
const inputVal = ref('')
const returnAmountVal = ref('')
const store = useUserStore()


const fetchData = () => {
    getReturnApplyIdApi(parseInt(route.query.id as string)).then(res => {
        list.value.push(res.data)
        form.value = res.data
    })
}
fetchData()

// 获取所有的收货地址
getCompanyAddressApi().then(res => {
    Receiving.value = res.data
})


const filters = (val: number) => {
    if (!val) return '￥0';
    return '￥' + val;
}

// 确认退款
const ConfirmReturn = () => {
    ElMessageBox.confirm("是否要进行该操作?", "提示?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    }).then(() => {
        getUpdateStatusIdApi({
            id: form.value.id,
            handleMan: store.username,
            companyAddressId: form.value.companyAddressId,
            handleNote: inputVal.value,
            receiveMan: store.username,
            returnAmount: returnAmountVal.value,
            status: form.value.status + 1,
            receiveNote: form.value.receiveNote
        }).then(res => {
            if (res.code === 200) {
                router.push('/oms/returnApply')
                ElMessage.success('确认退货成功')
            }
        })
    })
}

// 点击拒绝
const ConfirmRefuse = () => {
    ElMessageBox.confirm("是否要进行拒绝操作?", "提示?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    }).then(() => {
        getUpdateStatusIdApi({
            id: form.value.id,
            handleMan: store.username,
            companyAddressId: form.value.companyAddressId,
            handleNote: inputVal.value,
            receiveMan: store.username,
            returnAmount: returnAmountVal.value,
            status: form.value.status + 3,
            receiveNote: form.value.receiveNote
        }).then(res => {
            if (res.code === 200) {
                router.push('/oms/returnApply')
                ElMessage.success('拒绝成功成功')
            }
        })
    })
}

// 确认收货
const ConfirmReceipt = () => {
    ElMessageBox.confirm("是否要进行该操作?", "提示?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    }).then(() => {
        getUpdateStatusIdApi({
            id: form.value.id,
            handleMan: store.username,
            companyAddressId: form.value.companyAddressId,
            handleNote: inputVal.value,
            receiveMan: store.username,
            returnAmount: returnAmountVal.value,
            status: form.value.status + 1,
            receiveNote: form.value.receiveNote
        }).then(res => {
            if (res.code === 200) {
                router.push('/oms/returnApply')
                ElMessage.success('确认收货成功')
            }
        })
    })

}

</script>

<style scoped lang="less">
:deep(.align-c),
:deep(.cell) {
    text-align: center;
}

.listBox {
    border: 0.5px solid #ebeef5;
    padding: 20px;
    width: 1100px;
    margin: 40px auto 10px;

    .el-card__body {
        margin-bottom: 20px;
    }
}


.form {
    margin-bottom: 15px;

    .el-row {
        display: flex;
        border: 0.5px solid #dcdfe6;
        color: #606266;
        align-items: center;
        font-size: 14px;

        .form-border {
            width: 260px;
            border-right: 0.5px solid #dcdfe6;
            background-color: #f2f6fc;
            padding: 10px 0 10px 10px;
        }

        .form-right {
            margin-left: 10px;

            img {
                width: 80px;
                height: 80px;
            }
        }
    }
}
</style>
